<template>
	<view>
		<!-- 标题栏和状态栏占位符 -->
		<view class="titleNview-placing"> </view>
		<!-- <sub-tabvs class="" :tabs="typetab" @change="changeIndex" :selectIndex="selecttype" :scrollTop="scrollTop"></sub-tabvs> -->
		<view v-if="selecttype==1">
			<home-jqjs :datasa="listjq"></home-jqjs>
		</view>
		<view v-if="selecttype==2" class="flex space pd10_15" style="display:flex; flex-wrap:wrap;">
			<!-- <block v-for="(value,key) in listbz" :key="key"> -->
			<view style="width: 49%; margin-bottom: 20upx;">
				<!-- <image style="height: 500upx; width: 100%; border-radius: 18upx;" mode="aspectFill"
						:src="value.img"></image> -->
				<image style="height: 500upx; width: 100%; border-radius: 18upx;" mode="aspectFill"
					src="@/static/shilu-login/logo.png"></image>
			</view>
			<!-- </block> -->
		</view>
		<view v-if="selecttype==0">
			<view class="home-header pd0_15" :style="'background: '+mbgColor+';'">
				<view class="flex space fixed-top" :style="{paddingTop: statusBarHeight + 'px'}">
					<view class="flex alcenter">
						<image src="/static/index_logo.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
						<view class="cl-w ml10">Rolling Short</view>
					</view>
					<!-- <view class="home-mendian flex alcenter space plr15 cl-w9">
						<navigator style="width: 100%;" url="/pages/client/tuan/ss">
							<view class="flex alcenter space" style="width: 100%;">
								
								<text class="text-over ft14"
									style="width: calc(100% - 60rpx);">{{$t('text.placeholder')}}</text>
								<text class="iconfont  iconsousuo ft14 mr10"></text>
							</view>
						</navigator>
					</view> -->
					<view class="flex alcenter" style="width: 35%;">
						<navigator url="/pages/client/tuan/ss">
							<view>
								<text class="iconfont iconsousuo ft16 mr10 cl-w"></text>
							</view>
						</navigator>
						<view class="lang ml15 cl-w" @click="show = true">
							<view class="ft12 mr10" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								{{$t('text.jianti')}}
							</view>
							<u-icon name="arrow-down" color="#ffffff" size="14"></u-icon>
						</view>
					</view>
				</view>
				<!-- class="mt40" -->
				<view style="margin-top: 130rpx;">
					<home-banner :banners="banners"></home-banner>
					
				</view>
			</view>

			<view class="integral-mall-main plr15" style="margin-top: 30upx;">
				<!-- <view class="integal-mall-menu flex pt10 pb10">
					<view class="col2 text-center" @click="linkTo" data-link="/pages/client/tuan/zjjl">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[0]"></image>
						</view>
						<view class="ft14 ftw600">追剧</view>
					</view>
					<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/tuan/ss">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[6]"></image>
						</view>
						<view class="ft14 ftw600">最新</view>
					</view>
					<view class="col2 text-center bd-left" @click="linkTo"
						data-link="/pages/client/tuan/ss?selectIndex=3">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[2]"></image>
						</view>
						<view class="ft14 ftw600">排行</view>
					</view>
					<view class="col2 text-center bd-left" @click="linkTo"
						data-link="/pages/client/tuan/ss?selectIndex=2">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[5]"></image>
						</view>
						<view class="ft14 ftw600">免费</view>
					</view>
				</view> -->

				<view  class="mt24" v-if="hotdata">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<!-- <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image> -->
							<image style="width: 40rpx;height: 40rpx;" src="@/static/img/my/remeng.png"></image>
							<text class="ft16 ftw600 cl-w ml15 fonst1">{{$t('text.bzrm')}}</text>
						</view>
						<!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
						<view @click="huanyihuan()" class="ft14 cl-notice fonst2">{{$t('text.hyh')}}</view>
						<!-- </navigator> -->
					</view>
					<scroll-view class="scroll-view-container mt10" scroll-x="true">
						<block v-for="(value,key) in hotdata" :key="key" v-if="key>=hyh && key<hyh+3">
							<view class="box pb10 bg-default1 mr15" style="width:33%; position: relative;"
								@click="detail(value.id,0)">
								<view style="position:relative">
									<image class="integral-mall-goods" mode="aspectFill" :src="value.img">
									</image>
									<view class="namesss"
										style="position: absolute; top: 0px; right: 0px; margin-top: 0;">
										{{$t('text.huiyuan')}}
									</view>
								</view>

								<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-w">{{value.name}}</view>
							</view>
						</block>
					</scroll-view>

				</view>
				<view class="mt24" v-if="givedata">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<!-- <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[2]"></image> -->
							<image style="width: 40rpx;height: 40rpx;" src="@/static/img/my/paihangbang.png"></image>
							<text class="ft16 ftw600 cl-w ml15 fonst1">{{$t('text.paihangbang')}}</text>
						</view>
						<!-- <navigator url="/pages/client/tuan/ss?selectIndex=3"> -->
						<view class="ft14 cl-notice fonst2">{{$t('text.top3')}}</view>
						<!-- </navigator> -->
					</view>
					<scroll-view class="record" scroll-x="true">
						<view class="types"
							v-for="(item,index) in [$t('text.bfl'),$t('text.cunzhi'),$t('text.pingfen')]" :key="index"
							:class="{btna:tab_current == index}" @click="qie(index)">
							{{item}}
						</view>
					</scroll-view>
					<scroll-view class="scroll-view-container mt10" scroll-x="true">
						<block v-for="(value,key) in givedata" :key="key" v-if="key<3">
							<view class="integral-mall-coupon mr15" style="width: 33%;" @click="detail(value.id,0)">
								<view class="top" style="position:relative">
									<view class="flex center">
										<view class="coupon-value">
											<!-- <view class="btn-mini" style="position: absolute; top: 10upx; right: 10upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
											<image class="integral-tuan-l" style="height: 280upx;" mode="aspectFill"
												:src="value.img"></image>
											<view class="namesss"
												style="position: absolute; top: 0px; right: 0px; margin-top: 0;">
												{{$t('text.huiyuan')}}
											</view>
											<!--<view class="num cl-orange">
												<text class="ft24 ftw600">¥</text>
												<text class="ft24 ftw600 ml4">20</text>
											</view> -->
											<view class="ft14 plr10 cl-w ftw400 text-center text-over mt10">
												{{value.name}}
											</view>
										</view>
									</view>
								</view>

								<view class="y-l"></view>
								<view class="y-r"></view>
							</view>
						</block>
					</scroll-view>
					<view class="mt16 flex space">

					</view>
				</view>
			</view>
			<home-default :datasa="datasa" :type_list="type_list"></home-default>
			<!-- <com-footer model="index"></com-footer> -->
		</view>
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open" bgColor="#1e1e1e">
			<view class="" style="width: 500rpx;">
				<view class="text-center cl-w ft18 pt12 pb12 border-bottom">{{$t('navbar.watch')}}</view>
				<view class="pd15">
					<u-radio-group v-model="langValue" placement="column" iconPlacement="right" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '18px'}" v-for="(item, index) in langList" :key="index"
							:label="item.name" :name="item.value" @change="radioChange(item.value,index)">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</u-popup>
		<!-- <view style="height: 100rpx;"></view> -->
		<!-- <customTabbar :activeIndex="activeIndex" /> -->
	</view>
</template>
<script>
	// import customTabbar from '@/components/customTabBar/index.vue';
	export default {
		components: {
			// customTabbar
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				activeIndex: 0,
				show: false,
				langValue: '',
				listall: [{
						key: this.$t('text.bfl')
					},
					{
						key: this.$t('text.cunzhi')
					}, {
						key: this.$t('text.pingfen')
					}

				],

				langList: [{
						name: '简体中文',
						disabled: false,
						value: 'en'
					},
					{
						name: 'Tiếng Việt',
						disabled: false,
						value: 'vi'
					},
					{
						name: 'Indonesia',
						disabled: false,
						value: 'id'
					}, {
						name: 'Malaysia',
						disabled: false,
						value: 'ms'
					}, {
						name: 'ประเทศไทย',
						disabled: false,
						value: 'th'
					}, {
						name: 'English',
						disabled: false,
						value: 'eng'
					}
				],
				hyh: 0,
				navLock: false,
				datasa: [],
				listjq: [],
				listbz: [],
				showdyxx: true,
				dataconfig: [],
				banners: [

				],
				datainfo: [],
				type_list: [{
					name: this.$t('text.quanbu'),
					id: 0
				}, ],

				dataindex: [],
				hotdata: [],
				givedata: [],
				configs: {
					imgUrl: 'https://rl.rollingshort.net', // 配置的基础图片URL
					cdnUrl:'https://rls.rollingshort.net/uploads'
				},
				typetab: [{
						name: '推荐短剧',
						id: 1
					},
					{
						name: '剧情介绍',
						id: 2
					},
					{
						name: '剧情壁纸',
						id: 3
					},
				],
				selecttype: 0,
				scrollTop: 0,
				type: 1,
				tab_current: 0,
				mbgColor: this.$mbgColor,
			}
		},
		computed: {

		},
		onPageScroll(e) {
			if (e.scrollTop) {
				if (this.navLock == false) {
					this.navLock = true;
					uni.setNavigationBarColor({
						frontColor: "#FFFFFF",
						backgroundColor: "#FFFFFF",
						complete: () => {
							setTimeout(() => {
								this.navLock = false;
							}, 50); // 延时50ms再解锁
						}
					});
				}
			} else {
				if (this.navLock == false) {
					this.navLock = true;
					let this_ = this;
					console.log('Background color:', this_.mbgColor); // 调试背景色
					uni.setNavigationBarColor({
						frontColor: "#FFFFFF",
						backgroundColor: this_.mbgColor,
						complete: () => {
							setTimeout(() => {
								this.navLock = false;
							}, 50); // 延时50ms再解锁
						}
					});
				}
			}
		},

		onShareAppMessage(e) {

		},
		onShareTimeline(e) {

		},
		onLoad(e) {
			this.addFlags()
			// 取出缓充存内容
			const savedLocale = uni.getStorageSync('selectedLocale');
			if (savedLocale) {
				this.$i18n.locale = savedLocale;
			}
			// uni.setStorage({//缓存配置信息
			// 	key: 'webUrl',  
			// 	data: this.configs.webUrl
			// })
			//this.getList();
			this.qie(0)  
			// console.log(this.$u.config.v);
			// console.log(uni.getSystemInfoSync().statusBarHeight)

		},
		onUnload(){
			this.clearFlags()
		},
		onShow() {
			this.getList();
			// this.getList(1);
			// this.getList(2);
			// this.getList(3);
			let this_ = this
		},
		methods: {
			// 禁止截屏
			    addFlags() {
			        // #ifdef APP-PLUS
			        let osname = plus.os.name;
			        if (osname == "Android") {
			            var activity = plus.android.runtimeMainActivity();
			            console.log(activity);
			            console.log('开启防截屏');
			            plus.android.invoke(plus.android.invoke(activity, "getWindow"), "addFlags", 0x00002000)
			        }
			        // #endif
			    },
			    //  允许截屏  
			    clearFlags() {
			        // #ifdef APP-PLUS
			        let osname = plus.os.name
			        if (osname == "Android") {
			            var activity = plus.android.runtimeMainActivity()
			            console.log('关闭防截屏');
			            plus.android.invoke(plus.android.invoke(activity, "getWindow"), "clearFlags", 0x00002000)
			        }
			        // #endif
			    },
				
			getImageSrc(imgPath) {
				// 判断 imgPath 是否包含 'https://duanju.55of.com'
				if (imgPath && imgPath.startsWith(this.configs.imgUrl)) {
					return imgPath; // 如果已经包含，直接返回原路径
				} else {
					return this.configs.imgUrl + imgPath; // 否则拼接上基础路径
				}
			},
			open() {
				const savedLang = uni.getStorageSync('selectedLocale')
				console.log(savedLang, 'savedLang');
				if (savedLang) {
					this.langValue = savedLang
				}
			},
			close() {
				this.show = false
				// console.log('close');
			},
			groupChange(n) {
				console.log('groupChange', n);

			},
			
			radioChange(n, index) {
				this.$i18n.locale = n
				console.log('radioChange', n);
				uni.setStorageSync('selectedLocale', n); // 自动转为 JSON 字符串
				uni.setStorageSync('language', index); // 自动转为 JSON 字符串
				this.show = false
				this.getList()
				this.qie(0)

			},
			changeIndex(index) {
				if (this.typetab[index].id) {
					this.type = this.typetab[index].id
					//this.getList(0)
				}
				console.log(this.type)
				this.selecttype = index;
			},
			huanyihuan() {
				if (this.hyh < 12) {
					this.hyh = this.hyh + 3
				}
				if (this.hyh >= 12) {
					this.hyh = 0
				}
			},
			qie(index) {
				this.tab_current = index
				this.$httpas.post2({
					data: {
						do: 'video',
						op: 'givedata',
						index: this.tab_current
					},
					success: res => {
						this.givedata = res
						console.log('this.givedata',this.givedata);
					}
				})

			},
			getList() {
				let this_ = this
				let data = {};
				this.$httpas.post2({
					data: {
						do: 'video',
						op: 'indexdata',
					},
					success: data => {
						uni.setStorage({ //缓存配置信息
							key: 'config',
							data: data.config
						})
						console.log('data',data);
						// this.banners = data.data.config.banner
						if (data.banner != '') {
							// const prefix = this_.configs.cdnUrl;
							this.banners = data.banner
							// 	this.banners = data.banner.map((item)=>{
							// 	return {
							// 	        ...item,
							// 	        image: `${prefix}${item.image}`
							// 	    };
							// })
							// this_.banners = data.banner.map(item => {
							//    return {
							//      ...item, 
							//      image: this_.configs.cdnUrl + item.image 
							//    };
							//  });
							
							// console.log(this.banners,'this.banners');
						}
						if (data.config.name) {
							uni.setNavigationBarTitle({
								title: data.config.name
							});
						}
						if (data.config.mbgColor) {
							console.log(this_.mbgColor);
							// this.mbgColor = data.data.config.mbgColor
							uni.setNavigationBarColor({
								frontColor: "#FFFFFF",
								backgroundColor: this_.mbgColor,
								complete: () => {
									this.navLock = false;
								}
							});
						}
						this.listbz = data.listbz
						this.listjq = data.listjq
						this.datasa = data.new
						this.hotdata = data.hotdata
						console.log('this.hotdata',this.hotdata);
						this.type_list = [{
							name: this.$t('text.quanbu'),
							id: 0
						}]
						this.type_list = this.type_list.concat(data.type_list)
					}
				})
			},
			saoma() {
				//#ifdef APP-PLUS  
				uni.scanCode({
					success: function(res) {
						if (res.result.indexOf("uid") != -1) {
							var obj = JSON.parse(res.result);
							if (obj.uid) {
								uni.navigateTo({
									url: '/pages/login/reg?uid=' + obj.uid
								})
							}
						} else {
							uni.showToast({
								title: res.result,
								icon: "none"
							});
						}
					}
				});
				//#endif

			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
			linkTo(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let link = e.currentTarget.dataset.link;
					uni.navigateTo({
						url: link
					})
				}
			},

			exchange(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let id = e.currentTarget.dataset.id;
					uni.navigateTo({
						url: '/pages/client/integral/exchange?id=' + id
					})
				}
			},
		},
	}
</script>

<style scoped>
	.namesss {
		font-size: 22rpx;
		// background-color: #3f9f58;opacity: 1;
		// background-color: rgba(63, 159, 88, 0.8);
		position: absolute;
		color: #fff;
		// padding: 0 10rpx 0 10rpx;
		// border-radius: 0 20rpx 0 0;
		width: 80rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background: url("@/static/img/my/jux.png") no-repeat;
		background-size: contain;
	}

	.record {
		width: 92%;
		white-space: nowrap;
		margin: 30rpx;
	}

	.types {
		color: #666666;
		display: inline-block;
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		justify-content: space-around;
		padding: 0 26rpx;
		margin-right: 5rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.btna {
		color: #ffffff;
		// background-color:$uni-themd;
		background-color: #f8ba1b;
	}

	.fixed-top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		background: linear-gradient(to bottom, rgba(18, 18, 18, .95), rgba(18, 18, 18, .8));
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		padding: .375rem .75rem;
		border-bottom: 1px solid rgba(255, 255, 255, .05);
		display: flex;
		align-items: center;
	}

	.home-header {
		/* height: 300rpx; */
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 50%;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.lang {
		width: 70%;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
		text-align: center;
		line-height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.integral-mall-header {
		position: relative;
		height: 320rpx;
	}

	.integral-mall-header .bg {
		width: 100%;
		height: 320rpx;
	}

	.integral-mall-header .main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}

	.swiper-integral {
		height: 32rpx;
		width: 100%;
	}

	.integral-mall-main {
		position: relative;
		/* margin-top: -104rpx; */
	}

	.integal-mall-menu {
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.integral-tuan-l {
		width: 100%;
		height: 280rpx;
		background: #f2f2f2;
		border-radius: 16rpx 16rpx 0 0;
	}


	.integral-mall-coupon {
		display: inline-block;
		background: #1f1f1f;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.integral-mall-coupon .top {
		padding: 0rpx 0rpx 24rpx 0rpx;
		/* border-bottom: 2rpx dashed #FEC675; */
	}

	.integral-mall-coupon .y-l,
	.integral-mall-coupon .y-r {
		/* width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx; */
	}

	.integral-mall-coupon .y-l {
		left: -10rpx;
	}

	.integral-mall-coupon .y-r {
		right: -10rpx;
	}

	.integral-mall-coupon .coupon-value {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value image {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value .num {
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}

	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx 16upx 0 0;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		/* padding-top: 44px; */
		box-sizing: content-box;
	}

	.box {
		width: 100%;
		background: #1f1f1f;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		display: inline-block;
	}

	.scroll-view-container {
		width: 100%;
		white-space: nowrap;
		/* 保证内容在一行显示 */
	}

	.border-bottom {
		border-bottom: .03125rem solid rgba(255, 255, 255, .1);
	}
</style>